<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Reusable simple image swap</title>
<style>
body { padding: 10px; font-family: "helvetica neue", helvetica, arial;}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
  $('img').filter('[data-hover-src]').hover(function () {
    $(this).data('original-src', this.src).attr('src', $(this).attr('data-hover-src'));
  }, function () {
    $(this).attr('src', $(this).data('original-src'));
  });
});
</script>
</head>
<body>
<h1>Black and white to colour</h1>
<p>Roll your mouse over the image to see the it swap in to colour</p>
<img src="small-julie-in-winter-bw.jpg" alt="Julie in Winter" data-hover-src="small-julie-in-winter.jpg" />
<img src="small-julie-in-winter-bw.jpg" alt="Julie in Winter" />
</body>
</html>